<template>
  <div class="main">
    <p class="border-bottom main-title">设置新密码</p>
    <div class="main-center">
      <div>
        <p class="text">请设置 180****123@163.com的新密码,建议使用数字 字母 字符的组合密码,提高密码安全等级</p>
        <input type="text" placeholder="6-16位密码,区分大小写" v-model="newpassword">
      </div>
      <el-button :plain="true" class="btn default-btn" v-if='!hasPsd' @click="errorFun">确定</el-button>

      <el-button :plain="true" class="btn default-btn" v-if='hasPsd' @click="resetPsd">确定</el-button>
    </div>
  </div>
</template>

<script>
import Services from '@/service/service';
export default {
  name: "FindTwo",
  data (){
    return {
      hasPsd:false,
      newpassword:'',
      phone:"",
      verify:''
    }
  },
  methods: {
    getParam(){

      this.phone = this.$router.history.current.query.id;
      this.verify = this.$router.history.current.query.verify;
    },
    save(){
      let param={
        detail: {
          password: this.newpassword,
          phone: this.phone,
          userName: "用户名",
          verifyCode: this.verify
        }
      };
      Services.myAjax({
        methods:"post",
        url:Services.baseUrl+"/FinEnd/save",

        data:param
      },
      function(response) {
        console.log(response)

      },
      function(error) {

      });
    },
    resetPsd (){
      // 重置密码

      let data={
        param:{
          detail:{
            newPassworld:this.detail.newPassworld
          }
        }
      };
      Services.myAjax({
        methods:"post",
        url:Services.baseUrl+"/FinEnd/save",
        data:data
      });
    }
  },
  watch: {
    newpassword (newVal,oldVal){
      if(newVal!=''){
        this.hasPsd = true
      }else{
        this.hasPsd = false
      }
    }
  },
};
</script>
<style lang="stylus" scoped>
@import '~styles/variables';

.main {
  width: 14rem;
  height: 6.3rem;
  margin-left: 2.6rem;
  margin-top: 0.85rem;
  background: #f5f5f5;

  .main-title {
    font-size: 0.24rem;
    padding: 0.2rem;
  }

  .main-center {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 5rem;
    position: relative;
    top: 1rem;
    margin: auto;
    height: 3rem;
    font-size: 0.226rem;

    .phone {
      padding: 0.1rem 0.15rem;
      margin-top: 0.2rem;
    }
  }

  .text {
    margin-bottom: 0.15rem;
    font-size 16px;
    font-weight 600
  }

  .a-code {
    padding: 0.1rem 0.15rem;
  }

  .main-center input {
    height: 48px;
    line-height: 48px;
    border-radius: 48px;
    width: 100%;
    font-size 16px;
    text-indent 16px
  }

  .btn {
    background: $logoColor;
    height: 48px;
    line-height: 48px;
    border-radius: 48px;
    font-size 16px;
    padding 0
  }
}
</style>
